<template>  
    <nav class="navbar">  
      <div class="logo">  
        <router-link to="/">ONDA</router-link>  
      </div>  
      <ul class="nav-links">  
        <li v-for="link in navLinks" :key="link.to">  
          <router-link :to="link.to">{{ link.text }}</router-link>  
        </li>  
      </ul>  
    </nav>  
  </template>  
  <script>  
  export default {  
    data() {  
      return {  
        navLinks: [  
          { to: "/about", text: "About" },  
          { to: "/courses", text: "Courses" },  
          { to: "/b-and-b", text: "B & B" },  
          { to: "/teachers", text: "Teachers" },  
          { to: "/blog", text: "Blog" },  
          { to: "/weather", text: "Weather" },  
          { to: "/contact", text: "Contact" },  
        ],  
      };  
    },  
  };  
  </script>  
<style scoped>
.navbar {
  display: flex;  
  justify-content: space-between;
  align-items: center;  
  padding: 1vw;   
  box-shadow: 0 0.2vh 0.4vh rgba(0, 0, 0, 0.1);   
  position: absolute;  
  left: 0;  
  top: 0;  
  width: 100%;  
  height: auto;  
  opacity: 1;  
  background: #2B3641;  
}
.logo{
    color: white;
    flex-shrink: 0; 
}
.logo a {
  font-size: 1.5rem;
  font-weight: bold;
  text-decoration: none;
}

.nav-links {  
  list-style: none;  
  display: flex;  
  align-items: center;  
  margin-left: auto;  
  padding: 0;  
  color: #ffffff;  
  flex-wrap: wrap;  
}

.nav-links li {
  margin-left: 1rem; 
}

.nav-links a {
  text-decoration: none;
  color: #ffffff; 
  transition: color 0.3s ease;
  padding:0.75rem 1rem; 
}

.nav-links a:hover,
.nav-links a.router-link-active {
  color: #007bff;
}


@media (max-width: 768px) {
  .logo a {
    font-size: 1.2rem; 
  }

  .nav-links li {
    margin-left: 0.5rem; 
  }

  .nav-links a {
    padding: 0.5rem 0.75rem; 
  }
}
</style>